.landing-ui-field-color-colorset {
	position: relative;
	padding-bottom: 12px;
	margin: 0 4px 13px 4px;
	border-bottom: 1px solid rgba(82,92,105,.1);
}

.landing-ui-field-color-colorset-top {
	display: flex;
	justify-content: space-between;
}

.landing-ui-field-color-colorset-title {
	display: flex;
}

.landing-ui-field-color-colorset-title span {
	margin-right: 5px;
}

.landing-ui-field-color-colorset-bottom {
	/*display: flex;*/
	display: grid;
	grid-template-columns: 1fr .5fr;
}

.landing-ui-field-color-colorset-bottom .landing-ui-field-color-preset,
.landing-ui-field-color-colorset-bottom .landing-ui-field-color-colorpicker {
	/*flex-basis: 50%;*/
	/*padding: 0 4px;*/
}

.landing-ui-field-color-colorset-bottom .landing-ui-field-color-preset {
	/*flex-basis: 100%;*/
	/*flex-wrap: nowrap;*/
	display: grid;
	grid-template-columns: repeat(8, 1fr);
}

.landing-ui-field-color-colorset-bottom .landing-ui-field-color-colorpicker {
	flex-basis: 45%;
	padding: 0;
}

.landing-ui-field-color-colorset-bottom .landing-ui-field-color-preset .landing-ui-field-color-preset-item {
	margin: 0 1.5px 6px 1.5px;
}

.landing-ui-field-color-colorset-bottom .landing-ui-field-color-preset .landing-ui-field-color-zeroing,
.landing-ui-field-color-colorset-bottom .landing-ui-field-color-preset .landing-ui-field-color-preset-item[data-name="#ffffff"] {
	border: 1px solid rgba(168,173,180,.37);
}

.landing-ui-field-color-opacity {
	background: url('') left top repeat;
	background-size: 8px;
	position: relative;
	width: 100%;
	height: 40px;
	margin-top: 4px;
	margin-bottom: 10px;
	border-radius: 2px;
}

/*opacity border not work with gradient - need hack*/
.landing-ui-field-color-opacity::before
{
	content: '';
	display: block;
	position: absolute;
	top: -1px;
	bottom: -1px;
	left: -1px;
	right: -1px;
	box-shadow: 0 0 4px rgba(128, 128, 128, .1);
	border: 1px solid rgba(0, 0, 0, .05);
}

/*to can click on picker circle*/
.landing-ui-field-color-opacity::after {
	content: '';
	height: 10px;
	display: block;
}

.landing-ui-field-color-opacity-color {
	width: 100%;
	height: 100%;
	border-radius: 2px;
}

.landing-ui-field-color-opacity-picker {
	position: absolute;
	width: 4px;
	top: -2px;
	margin-left: -2px;
	bottom: -2px;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 2px;
	background-color: rgba(82, 92, 105, .22);
	cursor: pointer;
}

.landing-ui-field-color-opacity-picker-item {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	left: -8px;
	bottom: -7px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: #fff;
	box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .19);
}

.landing-ui-field-color-opacity-picker-item-circle {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #2fc6f6;
}

.landing-ui-field-color-draggable {
	-webkit-user-select: none;
	        user-select: none;
}

.landing-ui-field-color-draggable .landing-ui-field-color-opacity {
	cursor: pointer;
}

.landing-ui-field-color-draggable .landing-ui-field-color-opacity-picker {
	pointer-events: none;
}

.landing-ui-field-color-opacity-container {
	display: flex;
}

.landing-ui-field-color-opacity-container .landing-ui-field-range-output {
	align-items: center;
}

.landing-ui-field-color-opacity-range-output {
	display: flex;
	width: 89px;
	padding-left: 10px;
}

.landing-ui-field-color-opacity-range-output-input {
	font-family: var(--ui-font-family-primary, var(--ui-font-family-helvetica));
	font-size: 15px;
	text-align: center;
	color: #000000;
	width: 49px;
	height: 39px;
	line-height: 37px;
	margin-right: 13px;
	box-sizing: border-box;
	border-bottom: 1px rgba(198, 205, 211, .4) solid;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.landing-ui-field-color-opacity-range-output-arrows {
	display: flex;
	flex-direction: column;
	width: 27px;
	height: 39px;
	border-radius: 2px;
	border: 1px #C6CDD3 solid;
}

.landing-ui-field-color-opacity-range-output-arrows-up,
.landing-ui-field-color-opacity-range-output-arrows-down {
	position: relative;
	height: 49%;
	box-sizing: border-box;
	cursor: pointer;
	transition: all 200ms ease;
}

.landing-ui-field-color-opacity-range-output-arrows-up:hover {
	box-shadow: 0 -1px 5px 0 rgba(0,0,0,0.35);
}

.landing-ui-field-color-opacity-range-output-arrows-up:active {
	box-shadow: 0 -1px 1px 0 rgba(0,0,0,0.35);
}

.landing-ui-field-color-opacity-range-output-arrows-down:hover {
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.35);
}

.landing-ui-field-color-opacity-range-output-arrows-down:active {
	box-shadow: 0 2px 1px 0 rgba(0,0,0,0.35);
}

.landing-ui-field-color-opacity-range-output-arrows-up::before,
.landing-ui-field-color-opacity-range-output-arrows-down::before {
	position: absolute;
	content: '';
	width: 8px;
	height: 8px;
	left: 50%;
	top: 56%;
	transform: translate3d(-50%, -50%, 0) rotate(-45deg);
	transform-origin: center center;
	border-top: 2px #535C69 solid;
	border-right: 2px #535C69 solid;
	opacity: .8;
	transition: opacity 200ms ease;
	pointer-events: none;
}

.landing-ui-field-color-opacity-range-output-arrows-down {
	border-top: 1px #C6CDD3 solid;
	height: 50%;
}

.landing-ui-field-color-opacity-range-output-arrows-down::before {
	transform: translate3d(-50%, -50%, 0) rotate(135deg);
	top: 47%;
}

.landing-ui-field-color-opacity-range-output-arrows-up:hover::before,
.landing-ui-field-color-opacity-range-output-arrows-down:hover::before {
	opacity: 1;
}

.landing-ui-field-color-tabs-tab-toggler {
	display: block;
	position: relative;
	margin-right: 5px;
	font: 13px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
	color: rgba(82, 92, 105, .7);
	-webkit-user-select: none;
	        user-select: none;
	cursor: pointer;
}

.landing-ui-field-color-tabs .landing-ui-field-color-tabs-tab-toggler {
	margin-bottom: 14px;
}


.landing-ui-field-color-tabs:not(.landing-ui-field-color-tabs--big) .landing-ui-field-color-tabs-tab-toggler-name {
	display: inline-flex;
	font: 13px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
}

.landing-ui-field-color-tabs:not(.landing-ui-field-color-tabs--big) .landing-ui-field-color-tabs-tab-toggler {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.landing-ui-field-color-tabs:not(.landing-ui-field-color-tabs--big) .landing-ui-field-color-tabs-tab-toggler-icon {
	display: inline-block;
	width: 12px;
	height: 7px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.25.113L6.856 3.508 6 4.35l-.84-.842L1.767.113.567 1.31l5.441 5.44 5.44-5.44z' fill='%23525C69' fill-rule='evenodd'/%3E%3C/svg%3E");
	transition: opacity.3s, transform .3s;
	opacity: .3;
	order: 1;
}

.landing-ui-field-color-tabs:not(.landing-ui-field-color-tabs--big) .landing-ui-field-color-tabs-tab-toggler:hover .landing-ui-field-color-tabs-tab-toggler-icon {
	opacity: .7;
}

.landing-ui-field-color-tabs:not(.landing-ui-field-color-tabs--big) .landing-ui-field-color-tabs-tab-toggler.show .landing-ui-field-color-tabs-tab-toggler-icon {
	transform: rotate(-180deg);
}

.landing-ui-field-color-tabs-head {
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid rgba(82,92,105,.1);
}

.landing-ui-field-color-tabs-tab {
	margin-bottom: 14px;
	border-bottom: 1px solid rgba(82,92,105,.1);
}

.landing-ui-field-color-tabs-tab .landing-ui-field-color-tabs-tab-content {
	padding-bottom: 18px;
}

.landing-ui-field-color-tabs-tab-content:not(.show) {
    height: 0;
    padding: 0;
    margin: 0;
    border: none;
    overflow: hidden;
}

.landing-ui-field-color-tabs-head .landing-ui-field-color-tabs-tab-toggler {
	display: block;
	border-bottom: none;
}

/*BIG*/
.landing-ui-field-color-tabs-head--big {
    border: none;
    display: flex;
	margin-bottom: 10px;
	padding-bottom: 0;
}

.landing-ui-field-color-tabs-head--big > .landing-ui-field-color-tabs-tab-toggler {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 50%;
	margin: 0;
	padding: 10px 16px;
	border-bottom: 1px solid rgba(151,151,151,.29);
	border-radius: 3px 3px 0 0;
	font: 11px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-bold, 700);
	color: rgba(130,139,149,.7);
	text-transform: uppercase;
	box-sizing: border-box;
}

.landing-ui-field-color-tabs-head--big > .landing-ui-field-color-tabs-tab-toggler.show {
    border: 1px solid rgba(151,151,151,.29);
    border-bottom: none;
	color: #525c69;
}

.landing-ui-field-color-tabs-head--big > .landing-ui-field-color-tabs-tab-toggler:nth-child(1) > .landing-ui-field-color-tabs-tab-toggler-icon,
.landing-ui-field-color-tabs-head--big > .landing-ui-field-color-tabs-tab-toggler:nth-child(2) > .landing-ui-field-color-tabs-tab-toggler-icon {
	display: inline-block;
	background-position: center;
	background-repeat: no-repeat;
}

.landing-ui-field-color-tabs-head--big > .landing-ui-field-color-tabs-tab-toggler:nth-child(1) > .landing-ui-field-color-tabs-tab-toggler-icon {
	margin-right: 7px;
	width: 18px;
	height: 15px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='18' height='15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.429 0l8.063 8.063a.417.417 0 01-.235.707l-1.7.243-5.376 5.377a2.083 2.083 0 01-2.946 0L.61 9.765a2.083 2.083 0 010-2.946l3.103-3.103 1.125 1.126L2.116 7.46a1.383 1.383 0 00-.4.84l10.492-.375-.024.026.953-.148-5.58-5.58-.615.593 1.57 1.57a.278.278 0 010 .394l-.808.808a.278.278 0 01-.393 0L3.133 1.412a.278.278 0 010-.393L3.942.21a.278.278 0 01.393 0l1.442 1.442L7.429 0zm7.79 9.143c.283 0 1.907 2.206 1.907 3.26a1.906 1.906 0 01-3.813 0c0-1.054 1.624-3.26 1.907-3.26z' fill='%2359636F' fill-rule='evenodd' opacity='.5'/%3E%3C/svg%3E");
}

.landing-ui-field-color-tabs-head--big > .landing-ui-field-color-tabs-tab-toggler:nth-child(2) > .landing-ui-field-color-tabs-tab-toggler-icon {
	margin-right: 6px;
	width: 13px;
	height: 13px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.607.117h9.686c.823 0 1.49.667 1.49 1.49v9.686a1.49 1.49 0 01-1.49 1.49H1.607a1.49 1.49 0 01-1.49-1.49V1.607c0-.823.667-1.49 1.49-1.49zm.038 11.138h9.653v-.743l-2.574-2.97-1.287 1.485L4.22 5.314l-2.574 2.97v2.97zm7.462-6.223a1.245 1.245 0 100-2.49 1.245 1.245 0 000 2.49z' fill='%23525C69' fill-rule='evenodd' opacity='.5'/%3E%3C/svg%3E");
}

.landing-ui-field-color-tabs-head--big > .landing-ui-field-color-tabs-tab-toggler:nth-child(1).show > .landing-ui-field-color-tabs-tab-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='18' height='15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.429 0l8.063 8.063a.417.417 0 01-.235.707l-1.7.243-5.376 5.377a2.083 2.083 0 01-2.946 0L.61 9.765a2.083 2.083 0 010-2.946l3.103-3.103 1.125 1.126L2.116 7.46a1.383 1.383 0 00-.4.84l10.492-.375-.024.026.953-.148-5.58-5.58-.615.593 1.57 1.57a.278.278 0 010 .394l-.808.808a.278.278 0 01-.393 0L3.133 1.412a.278.278 0 010-.393L3.942.21a.278.278 0 01.393 0l1.442 1.442L7.429 0zm7.79 9.143c.283 0 1.907 2.206 1.907 3.26a1.906 1.906 0 01-3.813 0c0-1.054 1.624-3.26 1.907-3.26z' fill='%232FC6F6' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.landing-ui-field-color-tabs-head--big > .landing-ui-field-color-tabs-tab-toggler:nth-child(2).show > .landing-ui-field-color-tabs-tab-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.607.117h9.686c.823 0 1.49.667 1.49 1.49v9.686a1.49 1.49 0 01-1.49 1.49H1.607a1.49 1.49 0 01-1.49-1.49V1.607c0-.823.667-1.49 1.49-1.49zm.038 11.138h9.653v-.743l-2.574-2.97-1.287 1.485L4.22 5.314l-2.574 2.97v2.97zm7.462-6.223a1.245 1.245 0 100-2.49 1.245 1.245 0 000 2.49z' fill='%233BC8F5' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.landing-ui-field-color-primary {
    cursor: pointer;
    -webkit-user-select: none;
            user-select: none;
    display: flex;
	margin-bottom: 14px;
}

.landing-ui-field-color-primary-preview {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 2px;
    background: var(--primary);
    margin-right: 7px;
	position: relative;
}

.landing-ui-field-color-primary.active .landing-ui-field-color-primary-preview::before {
	content: '';
	position: absolute;
	right: -4px;
	bottom: -3px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='15' height='15' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect fill='%23FFF' width='14.819' height='14.819' rx='7.409'/%3E%3Cpath fill='%232FC6F6' d='M6.593 8.333l4.19-4.141 1.39 1.44-5.559 5.56-.021-.023-.022.023-3.398-3.415 1.39-1.44z'/%3E%3C/g%3E%3C/svg%3E");
	box-shadow: 0 2px 4px 0 rgba(0,0,0,.11);
}

.landing-ui-field-color-primary-text {
	font: 12px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-regular, 400);
	color: #525c69;
	opacity: .34;
	-webkit-user-select: none;
	        user-select: none;
	transition: opacity .3s;
	white-space: nowrap;
}
.landing-ui-field-color-primary-text:hover {
	opacity: 1;
}

.landing-ui-field-color-zeroing {
	cursor: pointer;
	-webkit-user-select: none;
	        user-select: none;
	display: flex;
	border-bottom: 1px solid rgba(82,92,105,.1);
	padding-bottom: 14px;
	margin-bottom: 14px;
}

.landing-ui-field-color-zeroing-preview {
	display: block;
	width: 16px;
	height: 16px;
	border-radius: 2px;
	background: white;
	margin-right: 7px;
	position: relative;
	border: 1px solid #C5C8CC;
}

.landing-ui-field-color-zeroing-preview:before {
	content: '';
	position: absolute;
	top: 37%;
	left: 75%;
	width: 2px;
	height: 13px;
	background-color: #c85d63;
	transform: rotate(-45deg) translate(-50%,-50%);
}

.landing-ui-field-color-zeroing.active .landing-ui-field-color-zeroing-state {
	content: '';
	position: absolute;
	right: -4px;
	bottom: -3px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='15' height='15' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect fill='%23FFF' width='14.819' height='14.819' rx='7.409'/%3E%3Cpath fill='%232FC6F6' d='M6.593 8.333l4.19-4.141 1.39 1.44-5.559 5.56-.021-.023-.022.023-3.398-3.415 1.39-1.44z'/%3E%3C/g%3E%3C/svg%3E");
	box-shadow: 0 2px 4px 0 rgba(0,0,0,.11);
}

.landing-ui-field-color-image-image {
	margin-bottom: 10px;
}

.landing-ui-field-color-image-image.active .landing-ui-field-image-preview-inner:before {
	content: '';
	position: absolute;
	right: -4px;
	bottom: -3px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='15' height='15' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect fill='%23FFF' width='14.819' height='14.819' rx='7.409'/%3E%3Cpath fill='%232FC6F6' d='M6.593 8.333l4.19-4.141 1.39 1.44-5.559 5.56-.021-.023-.022.023-3.398-3.415 1.39-1.44z'/%3E%3C/g%3E%3C/svg%3E");
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .11);
}

.landing-ui-field-color-image-size .landing-ui-field-header {
	font: 13px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
	margin-bottom: 0;
	color: rgba(82, 92, 105, .7);
}

.landing-ui-field-color-image .landing-ui-field-color-image-size {
	margin-bottom: 20px;
}

.landing-ui-field-color-image .landing-ui-field-color-image-attachment .landing-ui-field-input {
	border-bottom: 1px solid rgba(82, 92, 105, .1);
	margin-bottom: 14px;
	padding-bottom: 8px;
}

.landing-ui-field-color-image-attachment .landing-ui-field-checkbox-item-label {
	font: 13px var(--ui-font-family-primary, var(--ui-font-family-helvetica)) !important;
	color: rgba(82, 92, 105, .7) !important;
}

.landing-ui-field-color-gradient {
	display: grid;
	grid-template-columns: 1fr .5fr;
}

.landing-ui-field-color-gradient-preset-container .landing-ui-field-color-preset {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: 0 -1.5px -1.5px -1.5px;
}

.landing-ui-field-color-gradient-container {
	/*margin-top: 4px;*/
	/*margin-bottom: 10px;*/
	position: relative;
	height: 77px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	margin-left: 2px;
	border-radius: 2px;
}

.landing-ui-field-color-gradient-container.active:before {
	content: '';
	position: absolute;
	right: -4px;
	bottom: -3px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='15' height='15' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect fill='%23FFF' width='14.819' height='14.819' rx='7.409'/%3E%3Cpath fill='%232FC6F6' d='M6.593 8.333l4.19-4.141 1.39 1.44-5.559 5.56-.021-.023-.022.023-3.398-3.415 1.39-1.44z'/%3E%3C/g%3E%3C/svg%3E");
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .11);
}

.landing-ui-field-color-gradient-container.active .landing-ui-field-color-hex-preview.active::after {
	display: none;
}


.landing-ui-field-color-gradient-open-popup {
	position: absolute;
	top: calc(50% - 9px);
	right: -9px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='3' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 1.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM7 1.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM11 1.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z' fill='%237D7D7D'/%3E%3C/svg%3E");
	box-shadow: 0 0 4px rgba(128, 128, 128, .1);
	border: 1px solid rgba(0, 0, 0, .05);
}

/*.landing-ui-field-color-gradient-preset-popup*/
/*{*/
/*	border-radius: 4px;*/
/*}*/

.landing-ui-field-color-gradient-preset-popup-container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.landing-ui-field-color-gradient-switch-type {
	font: 12px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-regular, 400);
	color: #525c69;
	opacity: .34;
	-webkit-user-select: none;
	        user-select: none;
	transition: opacity .3s;
	white-space: nowrap;
	cursor: pointer;
	border-bottom: 1px dashed;
}

.landing-ui-field-color-gradient-open-popup,
.landing-ui-field-color-gradient-rotate,
.landing-ui-field-color-gradient-swap {
	border-radius: 50%;
	cursor: pointer;
	opacity: .8;
	width: 18px;
	height: 18px;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center center;
}

.landing-ui-field-color-gradient-rotate
{
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 6.5C0 10.09 2.968 13 6.63 13c.125 0 .25-.003.373-.01V11.35a5.12 5.12 0 01-.373.014c-2.74 0-4.962-2.178-4.962-4.865 0-2.687 2.222-4.865 4.962-4.865 2.44 0 4.468 1.726 4.884 4H8.602l3.7 3.625L16 5.634h-2.798C12.77 2.454 9.992 0 6.63 0 2.968 0 0 2.91 0 6.5z' fill='%237D7D7D'/%3E%3C/svg%3E");
}

.landing-ui-field-color-gradient-swap {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='15' height='13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%237D7D7D'%3E%3Cpath d='M2.352 2.934c0-.394.329-.714.735-.714.406 0 .736.32.736.714v8.559c0 .394-.33.713-.736.713a.725.725 0 01-.735-.713v-8.56z'/%3E%3Cpath d='M2.463.335a.748.748 0 011.248 0l2.35 3.647c.306.475-.046 1.091-.623 1.091H.737c-.578 0-.93-.616-.624-1.09L2.463.334zM11.177 1.507c0-.394.33-.713.736-.713.406 0 .735.32.735.713v9.986c0 .394-.329.713-.735.713a.725.725 0 01-.736-.713V1.507z'/%3E%3Cpath d='M12.537 12.665a.748.748 0 01-1.248 0L8.94 9.018c-.306-.475.046-1.092.623-1.092h4.701c.578 0 .93.617.624 1.092l-2.35 3.647z'/%3E%3C/g%3E%3C/svg%3E");
}

.landing-ui-field-color-gradient-rotate {
	margin-right: 9px;
}

.landing-ui-field-color-gradient-open-popup:hover,
.landing-ui-field-color-gradient-rotate:hover,
.landing-ui-field-color-gradient-swap:hover,
.landing-ui-field-color-gradient-switch-type:hover {
	opacity: 1;
}

.landing-ui-field-color-gradient-open-popup.disable,
.landing-ui-field-color-gradient-rotate.disable,
.landing-ui-field-color-gradient-swap.disable,
.landing-ui-field-color-gradient-switch-type.disable {
	cursor: not-allowed;
	opacity: .4;
}

.landing-ui-field-color-gradient .landing-ui-field-color-hex-preview.active {
	outline: none;
	box-shadow: none;
}

.landing-ui-field-color-gradient-btn {
	display: block;
	margin: 0 -10px 0 auto;
	width: 19px;
	height: 19px;
	background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.044 2.954v2.163H4.019a1 1 0 00-.993.884l-.007.117v.305H2.99v3.23H.97V4.956a2 2 0 012-2l3.075-.001zM6.07.198l3.793 3.793L6.07 7.784V.198z' fill='%23525C69' fill-rule='evenodd' opacity='.6'/%3E%3C/svg%3E") center no-repeat;
	border-radius: 50%;
	cursor: pointer;
}

.landing-ui-field-color-gradient-from .landing-ui-field-color-hex-preview,
.landing-ui-field-color-gradient-to .landing-ui-field-color-hex-preview {
	background-color: transparent !important;
	font-size: 10px;
}

.landing-ui-field-color-gradient-from .landing-ui-field-color-hex-preview {
	border-bottom: 1px solid rgba(255, 255, 255, .11);
}

.landing-ui-field-color-gradient-to .landing-ui-field-color-hex-preview {
	border-top: 1px solid rgba(255, 255, 255, .11);
}

.landing-ui-field-color-preset {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	margin-left: -1.5px;
	margin-right: -1.5px;
	margin-bottom: 3px;
}

.landing-ui-field-color-preset-item {
	position: relative;
	margin: 1.5px;
	box-shadow: 0 0 4px rgba(128, 128, 128, .1);
	border: 1px solid rgba(0, 0, 0, .05);
	border-radius: 2px;
	cursor: pointer;
	transition: box-shadow 200ms ease;
}
/*gradient with transparent border not work*/
.landing-ui-field-color-gradient-preset-container .landing-ui-field-color-preset-item {
	border: none;
}

.landing-ui-field-color-preset-item:hover:not('.landing-ui-field-color-preset-preview-mode') {
	box-shadow: 0 0 3px rgba(0, 0, 0, .4);
}

.landing-ui-field-color-preset-item::after {
	content: '';
	display: block;
	padding-bottom: 100%;
}


.landing-ui-field-color-preset-item.active:before {
	content: '';
	position: absolute;
	right: -4px;
	bottom: -3px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='15' height='15' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect fill='%23FFF' width='14.819' height='14.819' rx='7.409'/%3E%3Cpath fill='%232FC6F6' d='M6.593 8.333l4.19-4.141 1.39 1.44-5.559 5.56-.021-.023-.022.023-3.398-3.415 1.39-1.44z'/%3E%3C/g%3E%3C/svg%3E");
	box-shadow: 0 2px 4px 0 rgba(0,0,0,.11);
}

.landing-ui-field-color-preset.landing-ui-field-color-preset-preview-mode {
	margin: 2px;
}

.landing-ui-field-color-preset.landing-ui-field-color-preset-preview-mode.active {
	outline: 1px solid rgba(255, 255, 255, .75);
	box-shadow: 0 0 10px red;
}

.landing-ui-field-color-presets-left {
	display: flex;
	align-items: center;
}

.landing-ui-field-color-presets-left .landing-ui-field-color-presets-title {
	margin-right: 5px;
}

.landing-ui-field-color-control-title
{
	color: silver;
	font-style: italic;
	font-size: .8em;
	margin-top: 5px;
}
.landing-ui-field-color-popup-footer
{
	margin-top: 14px;
	display: flex;
	justify-content: center;
}

.landing-ui-field-color-presets {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 7px;
	width: 100%;
}

.landing-ui-field-color-presets-title {
	margin-right: 5px;
	max-width: 100%;
	font: 13px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-regular, 400);
	color: #525c69;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	opacity: .7;
}

.landing-ui-field-color-presets-open {
	font: 12px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-regular, 400);
	color: #525c69;
	opacity: .34;
	-webkit-user-select: none;
	        user-select: none;
	transition: opacity .3s;
	white-space: nowrap;
	cursor: pointer;
	border-bottom: 1px dashed;
}

.landing-ui-field-color-presets-open:hover {
	opacity: 1;
}

.landing-ui-field-color-presets-preset {
    margin: 10px 1px;
    padding: 3px;
    border-radius: 3px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.landing-ui-field-color-presets-preset-item {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;;
    width: 15px;
    height: 15px;
}

.landing-ui-field-color-presets-popup {
	padding: 4px 6px;
}

.landing-ui-field-color-presets-popup-title {
	display: block;
	padding-bottom: 10px;
	margin-bottom: 12px;
	border-bottom: 1px solid rgba(82,92,105,.1);
	font: var(--ui-font-weight-bold) 13px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
	color: #535c69;
}

.landing-ui-field-color-presets-popup-inner {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	margin: 0 -9px;
	max-height: 180px;
	overflow-y: auto;
}

.landing-ui-field-color-presets-popup-inner .landing-ui-field-color-presets-preset {
	position: relative;
	padding: 4px;
	margin: 2px 9px;
	border: 2px solid transparent;
	transition: border .3s;
	border-radius: 1px;
	cursor: pointer;
}

.landing-ui-field-color-presets-popup-inner .landing-ui-field-color-presets-preset.active,
.landing-ui-field-color-presets-preset:hover {
	border: 2px solid rgba(82,92,105,.34);
}

.landing-ui-field-color-presets-popup-inner .landing-ui-field-color-presets-preset.active:after {
	content: '';
	position: absolute;
	right: -5px;
	bottom: -4px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='15' height='15' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect fill='%23FFF' width='14.819' height='14.819' rx='7.409'/%3E%3Cpath fill='%232FC6F6' d='M6.593 8.333l4.19-4.141 1.39 1.44-5.559 5.56-.021-.023-.022.023-3.398-3.415 1.39-1.44z'/%3E%3C/g%3E%3C/svg%3E");
	box-shadow: 0 2px 4px 0 rgba(0,0,0,.11);
}

.presets-popup .popup-window-content {
	overflow: hidden!important;
}

.landing-ui-field-color-reset {
	display: block;
	width: 22px;
	height: 22px;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.805 2.294a5.05 5.05 0 00-7.143 0l-.002.004L.025.664V5h4.336L2.664 3.302l.003-.003A3.63 3.63 0 112.2 7.858l-1.13.865a5.05 5.05 0 107.736-6.43z' fill='%23525C69' fill-rule='evenodd'/%3E%3C/svg%3E") center no-repeat;
	transition: opacity .3s;
	opacity: .3;
	cursor: pointer;
}

.landing-ui-field-color-reset:hover {
	opacity: .7;
}
.landing-ui-field-color-hex {
	position: relative;
	box-shadow: 0 0 4px rgba(128, 128, 128, .1);
	border: 1px solid rgba(0, 0, 0, .05);
}

.landing-ui-field-color-colorset .landing-ui-field-color-hex {
	margin-left: 3px;
}

.landing-ui-field-color-hex-input,
.landing-ui-field-color-hex-preview {
	color: #000;
}

.landing-ui-field-color-hex-input {
	height: 22px;
	max-width: 77px;
	border-radius: 2px;
	border: none;
	outline: none;
	padding: 2px 5px;
	box-sizing: border-box;
}

.landing-ui-field-color-hex-preview {
	position: relative;
	padding: 3px 19px 3px 6px;
	border-radius: 2px;
	font-size: 11px;
	color: #525c69;
	cursor: pointer;
	transition: .3s;
}

.landing-ui-field-color-hex-preview-btn {
	position: absolute;
	top: 50%;
	right: 9px;
	display: block;
	transform: translate(0, -50%);
	cursor: pointer;
	transition: .3s;
}

.landing-ui-field-color-hex-input.active,
.landing-ui-field-color-hex-preview.active {
	position: relative;
}

.landing-ui-field-color-hex-input.active:after,
.landing-ui-field-color-hex-preview.active:after {
	content: '';
	position: absolute;
	right: -4px;
	bottom: -3px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='15' height='15' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect fill='%23FFF' width='14.819' height='14.819' rx='7.409'/%3E%3Cpath fill='%232FC6F6' d='M6.593 8.333l4.19-4.141 1.39 1.44-5.559 5.56-.021-.023-.022.023-3.398-3.415 1.39-1.44z'/%3E%3C/g%3E%3C/svg%3E");
	box-shadow: 0 2px 4px 0 rgba(0,0,0,.11);
}

:root {
	--saturation: 100%;
}

.landing-ui-field-color-spectrum {
	background: linear-gradient(to bottom, white 0%, transparent 50%, black 100%),
	linear-gradient(
		to right,
		hsl(0, var(--saturation), 50%) 0%,
		hsl(30, var(--saturation), 50%) 8%,
		hsl(60, var(--saturation), 50%) 16%,
		hsl(90, var(--saturation), 50%) 24%,
		hsl(120, var(--saturation), 50%) 32%,
		hsl(150, var(--saturation), 50%) 40%,
		hsl(180, var(--saturation), 50%) 48%,
		hsl(210, var(--saturation), 50%) 56%,
		hsl(240, var(--saturation), 50%) 64%,
		hsl(270, var(--saturation), 50%) 72%,
		hsl(300, var(--saturation), 50%) 80%,
		hsl(330, var(--saturation), 50%) 88%,
		hsl(360, var(--saturation), 50%) 95.7%,
		rgb(128, 128, 128) 96.3%,
		rgb(128, 128, 128) 100%
	);

	position: relative;
	width: 100%;
	height: 150px;
	margin-top: 8px;
	border-radius: 2px;
}

.landing-ui-field-color-spectrum-picker {
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cfilter x='-38.9%25' y='-27.8%25' width='177.8%25' height='177.8%25' filterUnits='objectBoundingBox' id='a'%3E%3CfeOffset dy='1' in='SourceAlpha' result='shadowOffsetOuter1'/%3E%3CfeGaussianBlur stdDeviation='1' in='shadowOffsetOuter1' result='shadowBlurOuter1'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0' in='shadowBlurOuter1'/%3E%3C/filter%3E%3Cpath d='M4.5 0a4.5 4.5 0 110 9 4.5 4.5 0 010-9zm0 2a2.5 2.5 0 100 5 2.5 2.5 0 000-5z' id='b'/%3E%3C/defs%3E%3Cg transform='translate(2 1)' fill='none' fill-rule='evenodd' opacity='.926'%3E%3Cuse fill='%23000' filter='url(%23a)' xlink:href='%23b'/%3E%3Cuse fill='%23FFF' xlink:href='%23b'/%3E%3C/g%3E%3C/svg%3E") 50% 50% no-repeat;
	width: 13px;
	height: 13px;
	margin-left: -6px;
	margin-top: -6px;
	position: absolute;
	z-index: 20;
	top: 20px;
	left: 20px;
	cursor: pointer;
}

.landing-ui-field-color-spectrum-picker.hidden {
	display: none;
}

.landing-ui-field-color-draggable {
	-webkit-user-select: none;
	        user-select: none;
}

.landing-ui-field-color-draggable .landing-ui-field-color-spectrum {
	cursor: pointer;
}

.landing-ui-field-color-draggable .landing-ui-field-color-spectrum-picker {
	pointer-events: none;
}

.landing-ui-field-color-popup-head {
	display: flex;
	align-items: center;
	margin-bottom: 5px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(151,151,151,.29);
}

.landing-ui-field-color-recent {
    display: flex;
	flex-grow: 1;
	padding-right: 5px;
	margin: 0 -1.5px;
	overflow: hidden;
}

.landing-ui-field-color-recent-item {
	margin: 0 1.5px;
    height: 22px;
    width: 22px;
	border-radius: 2px;
    -webkit-user-select: none;
            user-select: none;
    cursor: pointer;
	box-shadow: 0 0 4px rgba(128, 128, 128, .1);
	border: 1px solid rgba(0, 0, 0, .05);
}
